<template>
    <view class="swiper-page" :style="{
        margin: (params.margin_y * 2.2) + 'rpx ' + (params.margin_x * 2.2) + 'rpx 0',
        borderRadius: (params.borderradius) + 'px',
        height: (params.height * 2.2) + 'rpx'
    }">
        <view class="bg_img_view" :style="{
            borderRadius: (params.borderradius) + 'px'
        }">
            <image class="bg_img" v-for="(item, index) in data" :key="index" :src="item.imgurl"
                :style="{ zIndex: index === current ? '2' : '1', borderRadius: (params.borderradius) + 'px', height: (params.height * 2.2) + 'rpx' }"
                :class="{ 'fadein': index === current }" mode="aspectFill" />
        </view>

        <swiper class="swiper" id="swiper" :indicator-dots="false" :autoplay="true" :interval="params.interval * 1000"
            circular @change="bannerchange" @animationfinish="onAnimationfinish" @transition="handleTransition"
            :style="{ height: (params.height * 0.9) + 'rpx', marginTop: (params.height * 1.1) + 'rpx' }">
            <swiper-item v-for="(item, index) in data" :key="index">
                <view class="swiper-item">
                    <image class="image"
                        :style="{ top: `${top}px`, left: `${left}px`, height: (params.height * 2.2) + 'rpx' }"
                        :src="item.imgurl" mode="aspectFill" @click="goto" :data-url="item.hrefurl">
                    </image>
                </view>
            </swiper-item>
        </swiper>


        <view v-if="params.indicatordots == '1' && data.length > 1" class="dp-banner-swiper-pagination"
            :style="{ justifyContent: (params.align == 'center' ? 'center' : (params.align == 'left' ? 'flex-start' : 'flex-end')), bottom: (params.dotSite) + 'px' }">
            <block v-if="params.shape == 'shape4'">
                <view class="dp-banner-swiper-fraction" :style="{ backgroundColor: params.indicatoractivecolor }">
                    <text>{{ current + 1 }}/{{ data.length }}</text>
                </view>
            </block>

            <block v-else v-for="(item, index) in data" :key="item.id">
                <block v-if="params.shape == ''">
                    <view v-if="current == index" class="dp-banner-swiper-shape0 dp-banner-swiper-shape0-active"
                        :style="{ backgroundColor: params.indicatoractivecolor }"></view>
                    <view v-else class="dp-banner-swiper-shape0" :style="{ backgroundColor: params.indicatorcolor }">
                    </view>
                </block>
                <block v-if="params.shape == 'shape1'">
                    <view v-if="current == index" class="dp-banner-swiper-shape1"
                        :style="{ backgroundColor: params.indicatoractivecolor }"></view>
                    <view v-else class="dp-banner-swiper-shape1" :style="{ backgroundColor: params.indicatorcolor }">
                    </view>
                </block>
                <block v-if="params.shape == 'shape2'">
                    <view v-if="current == index" class="dp-banner-swiper-shape2"
                        :style="{ backgroundColor: params.indicatoractivecolor }"></view>
                    <view v-else class="dp-banner-swiper-shape2" :style="{ backgroundColor: params.indicatorcolor }">
                    </view>
                </block>
                <block v-if="params.shape == 'shape3'">
                    <view v-if="current == index" class="dp-banner-swiper-shape3"
                        :style="{ backgroundColor: params.indicatoractivecolor }"></view>
                    <view v-else class="dp-banner-swiper-shape3" :style="{ backgroundColor: params.indicatorcolor }">
                    </view>
                </block>
            </block>
        </view>
    </view>
</template>

<script>
export default {
    name: "IndexSwiper",
    props: {
        list: {
            type: Array,
            default: () => [

            ]
        },
        params: {},
        data: {}
    },
    data() {
        return {
            top: 0,
            left: 0,
            width: 0,
            current: 0,
            isRightScorll: false,
            isLeftScorll: false,
            isShow: true,
            opacity: 1,
            throttled: false,
            dotsStyles: {
                // height: 2,
                // backgroundColor: 'rgba(92, 169, 183, .3)',
                // border: '1px rgba(92, 169, 183, .3) solid',
                // color: '#fff',
                // selectedBackgroundColor: 'rgba(92, 169, 183, .9)',
                // selectedBorder: '1px rgba(92, 169, 183, .9) solid'
                height: 0,
                width: 0,
                backgroundColor: null,
                color: null,
                selectedBackgroundColor: null,
                selectedBorder: null,
                border: null,
            },
            // data: [
            //     {
            //         src: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250113/62e07ca046e8208cc7478c75c4adca7d.jpg',
            //         title: '梦想邮轮1'
            //     },
            //     {
            //         src: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250114/89fcb7edc39177eae0c28b243e30f503.jpg',
            //         title: '梦想邮轮2'
            //     },
            //     {
            //         src: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250122/93299d99a47f624b41090728314de9a9.jpg',
            //         title: '梦想邮轮3'
            //     }
            // ]
        }
    },
    methods: {
        bannerchange: function (e) {
            const newIndex = e.detail.current;

            // 判断是否切换到下一张
            if (newIndex > this.current) {
                // console.log('切换到下一张');
            } else if (newIndex < this.current) {
                // console.log('切换到上一张');
            }

            this.current = newIndex; // 更新当前索引
        },
        // 节流函数
        useThrottle(fn, delay) {
            return (...args) => {
                if (!this.throttled) {
                    this.throttled = true;
                    fn.apply(this, args);
                    setTimeout(() => {
                        this.throttled = false;
                    }, delay);
                }
            };
        },
        onAnimationfinish(e) {
            this.current = e.detail.current
            this.isRightScorll = false
            this.isLeftScorll = false
        },
        startAni() {
            this.opacity = 0.3
            setTimeout(() => {
                this.opacity = 1
            }, 200)
        },

        handleTransition(e) {
            // console.log("e.detail.dx", e.detail.dx)
        },
        handleTransition2(e) {
            if (e.detail.dx >= this.width * 0.5 && !this.isRightScorll) {
                this.startAni()
                if (this.current === this.data.length - 1) {
                    this.current = 0
                } else {
                    this.current++
                }
                this.isRightScorll = true
                this.isLeftScorll = false
            }
            if (e.detail.dx < this.width * 0.5 && this.isRightScorll) {
                this.startAni()
                if (this.current === 0) {
                    this.current = this.data.length - 1
                } else {
                    this.current--
                }
                this.isRightScorll = false
                this.isLeftScorll = false
            }
            if (e.detail.dx <= this.width * -0.5 && !this.isLeftScorll) {
                this.startAni()
                if (this.current === 0) {
                    this.current = this.data.length - 1
                } else {
                    this.current--
                }
                this.isLeftScorll = true
                this.isRightScorll = false
            }
            if (e.detail.dx > this.width * -0.5 && this.isLeftScorll) {
                this.startAni()
                if (this.current === this.data.length - 1) {
                    this.current = 0
                } else {
                    this.current++
                }
                this.isLeftScorll = false
                this.isRightScorll = false
            }
        }



    },
    created() {
        // 在created钩子中创建节流函数
        //this.onTransition = this.useThrottle(this.handleTransition, 200);
    },
    mounted() {
        const query = uni.createSelectorQuery().in(this);
        query.select('#swiper').boundingClientRect(data => {
            this.top = data.top * -1
            this.left = data.left * -1
            this.width = data.width
        }).exec()
    },
    computed: {
        bgImg() {
            return this.data[this.current].imgurl
        }
    }
}
</script>

<style lang="scss">
.swiper-page {
    width: 100vw;
    height: 600rpx;
    display: flex;
    justify-content: center;
    background-size: cover;
    position: relative;

    .bg_img {
        width: 100vw;
        height: 600rpx;
        position: absolute;
        inset: 0;
        z-index: 1;
        opacity: 0;
        // opacity: v-bind('opacity');
        // transition: opacity 0.1s;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    }

    .fadein {
        // -webkit-transition: all 0.2s;
        // -moz-transition: all 0.2s;
        // -ms-transition: all 0.2s;
        // -o-transition: all 0.2s;
        // transition: all 0.2s;
        opacity: 1 !important;
    }

    .swiper {
        //margin-top: 136px;
        margin-top: 200px;
        // width: 650rpx;
        width: 90vw;
        // height: 200rpx;
        height: 600rpx;
        border-radius: 20rpx;
        overflow: hidden;
        position: relative;
        z-index: 8;

        .swiper-item {
            width: 100%;
            height: 100%;
            overflow: hidden;
            border-radius: 20rpx;
            position: relative;
            z-index: 4;

            .image {
                width: 100vw;
                height: 600rpx;
                position: absolute;
                z-index: 3;
            }
        }
    }
}


.dp-banner-swiper-pagination {
    padding: 0 10px;
    bottom: 12px;
    left: 0;
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 9;
}

.dp-banner-swiper-shape0 {
    width: 3px;
    height: 3px;
    margin: 0 2px !important;
}

.dp-banner-swiper-shape0-active {
    width: 13px;
    border-radius: 1.5px;
}

.dp-banner-swiper-shape1 {
    width: 12px;
    height: 6px;
    border-radius: 0;
    margin: 0 2px
}

.dp-banner-swiper-shape2 {
    width: 8px;
    height: 8px;
    border-radius: 0;
    margin: 0 2px
}

.dp-banner-swiper-shape3 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 0 2px;
}

.dp-banner-swiper-shape4 {
    width: 8px;
    height: 3px;
    border-radius: 50%;
    margin: 0 1px;
}

.dp-banner-swiper-shape4-active {
    width: 13px;
    border-radius: 1.5px;
}

.dp-banner-swiper-number {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    transition: all 0.3s;
}

.dp-banner-swiper-fraction {
    padding: 4px 10px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>